<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <link rel="stylesheet" href="./weui.css">
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style type="text/css">
    #nav-bar {
      width: 100%;
      background-color: rgba(10, 10, 10, 0.15);
      height: 50px;
      position: absolute;
      top: 0px;
    }
    
    .nav-head {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      height: 50px;
    }
  </style>
  <script src='/socket.io/socket.io.js'></script>
  <script>
		$(function(){

				$('#login').on('click',function(){
					var name=$('#name').val();
					
					if (name!='') {
              
						emitLogin(name);
            
					}else{
						alert('请输入昵称');
					};
				});

				$('#send-msg').on('click',function(){
					var name=$('#name').val();
          
          if (name!='') {
            var msg=$('#msg').val();
             chat(msg);
              $('#msg').val('');
          }else{
            alert('起个名字再聊天吧 ^.^');
          };
         
				});

				$('#logout').on('click',function(){
						
            $("#login").prop('disabled',false);
						$('#name').val('');
						logout();
				});

        $('#clearScreen').on('click',function(){
            $('#broadcast').html('');

        });

        $("#send-msg-area").keyup(function(){
        if(event.keyCode == 13){
          $("#send-msg").trigger('click');
        }
    });

        $('#userList-btn1').on('click',function(){
                $("#userList").toggle(1000);  

        });
		});

		var socket=io.connect();
		socket.emit('login');
		socket.on('login',function(names){
				$('#userList').html('</br>'+names+'</br>');
		})

		var emitLogin=function(name){
			
			socket.emit('newUserLogin',name);
		}

		var chat=function(msg){
			
			socket.emit('chat',msg);
		};

		var logout=function(){
			
			socket.emit('logout');
		};

		socket.on('newUserLogin',function(name){
      $("#login").prop('disabled',true);
			$('#broadcast').append('<p style="color:#00FF00;font-size:10pt">'+name+'进入聊天室</p>');
		})


		socket.on('loginConfirmed',function(){
			alert("您以进入聊天室，愉快的聊天吧");
		})


		socket.on('repeatedName',function(){
			alert('昵称重复，请重新输入');
		});

		socket.on('chat',function(currentTime,msg,name){
				var currentName=$('#name').val();
        if (name!=currentName) {
            $('#broadcast').append('<p>'+currentTime+'</p>');
              $('#broadcast').append('<p style="font-size:15pt">'+name+' : '+msg+'</p>');
        } else {
              $('#broadcast').append('<p style="text-align:right;">'+currentTime+'</p>');
              $('#broadcast').append('<p style="text-align:right;font-size:15pt">你 : '+msg+'</p>');
              
        };
        $("#broadcast").scrollTop($("#broadcast")[0].scrollHeight);
		});


		socket.on('disconnect',function(name){
      socket.emit('login');
			console.log(name+'与服务器断开连接');
			$('#broadcast').append('<p style="color:red;font-size:10pt">'+name+'已断开</p>');
		});

</script>
</head>

<body ontouchstart="" style="background-color:#000;">
  <div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">
    <img src="./images/starheaven.jpeg" height="100%" width="100%" />
  </div>
  <div id='container' class='container' style="">
    <h3 class='text-center' style="color:#FFF;">聊天室</h3>
    <div class="row">
      <div class='col-xs-4' style="">
        <input id='name' name='name' placeholder='设置昵称' class="weui_input" style="color:#FFF;"></br>
        <button id='login' class="weui_btn weui_btn_primary weui_btn_mini">进入</button>
        <button id='logout' class="weui_btn weui_btn_warn weui_btn_mini">退出</button>
        <button id='clearScreen' class="weui_btn weui_btn_warn weui_btn_mini">清屏</button>
      </div>

      <div class='col-xs-8' style="height:50pt;">
        <span id="userList-btn1" style="color:#FFF">用户列表</span>
        <div id='userList' style="color:#FFF;overflow-y:auto;height:50pt;">

        </div>
      </div>
    </div>
    <div id='broadcast' style="height:280pt;width:100%;overflow:auto;margin-top:15pt;color:#FFF;font-size:12pt;">
    </div>

    <div id='send-msg-area' style='height:30pt;border:solid;'>
      <input id='msg' ,name='msg' class='weui_input' style="height:100%;width:100%;color:#FFF;" />

    </div>
    <button id='send-msg' class='weui_btn btn-success' style='margin-top:10pt;'>发送</button>
  </div>
</body>
</html>